<template>
  <div class="box" v-chart-resize>
    <div class="box1" v-if="box1Show">
      <div class="top1">
        <div class="top2"></div>
      </div>
    </div>

    <div class="box2" v-if="!box1Show">
      <div class="top3"></div>
<!--      <div class="top3"></div>-->
<!--      <div class="top3"></div>-->
<!--      <div class="top3"></div>-->
    </div>
  </div>
</template>

<script>

import resizeDetector from 'element-resize-detector'

export default {
  data() {
    return {
      box1Show: false
    }
  },
}
</script>

<style lang="scss" scoped>

* {
  box-sizing: border-box;
}

.box {
  width: vw(1280);
  height: vh(800);
  font-size: vh(16);
  //border: vh(2) solid red;
  background-color: rgb(29, 115, 130);
  display: flex;
}
.box1 {
  width: vw(1280);
  height: vh(800);
  // border: vh(2) solid red;
  display: flex;
}

.top1 {
  width: vw(1280);
  height: vh(800);
  // border: vh(2) solid red;
  display: flex;

  .top2 {
    width: vw(426);
    height: vh(266);
    background-color: green;

    margin-top: vh(266  * 2);
    margin-left: vw(426 * 2);
    display: flex;
  }
}

.box2 {
  width: vw(1280);
  height: vh(800);
  border: vh(2) solid red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
  background-color: white;
}

.top3 {
  width: vw(1280 / 2);
  height: vh(800 / 2);
  border: vh(2) solid black;
}
</style>